<template>
  <el-dialog
      v-model="workShopDetailWinDialogVisible"
      title="查看车库详情"
      width="70%"
      @close="handleClose"
  >
    <template #default>
      <el-form style="margin-top: 10px" :model="workShop" label-width="auto">
        <el-form-item  style="font-weight: bold" label="车间编码">
          <el-input v-model="workShop.workShopCode" readonly/>
        </el-form-item>

        <el-form-item style="font-weight: bold" label="车间名称">
          <el-input v-model="workShop.workShopName" readonly/>
        </el-form-item>

        <el-form-item style="font-weight: bold;" label="面积">
          <el-input-number style="width: 220px" min="0" v-model="workShop.area" step="0.1" disabled/>
        </el-form-item>

        <el-form-item style="font-weight: bold" label="负责人">
          <el-input v-model="workShop.charge" readonly/>
        </el-form-item>

        <el-form-item style="font-weight: bold" label="是否启用">
          <el-radio-group v-model="workShop.workShopStatus" disabled>
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item style="font-weight: bold" label="备注">
          <el-input v-model="workShop.remark" type="textarea" readonly/>
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <el-button @click="cancelDetailWorkShop">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch} from "vue";
import workShopRequest from "@/api/workShop.js";
// 申明这个组件的事件  editComplete
const emits = defineEmits(['editComplete','cancelWorkShopDetail'])
// 申明组件的属性
const props = defineProps(['workShopId']);
// 弹窗标记
let workShopDetailWinDialogVisible = ref(false);
// 详情对象
let workShop = ref({});

/**
 * 取消详情按钮事件
 */
function cancelDetailWorkShop(){
  // 关闭窗体
  workShopDetailWinDialogVisible.value = false;
  // 触发暴漏出去的取消编辑的事件
  emits("cancelWorkShopDetail")
}

/**
 * 关闭窗体前的回调函数
 */
function handleClose(){
  // 触发暴漏出去的取消编辑的事件
  emits("cancelWorkShopDetail")
}

/**
 * 通过 workShopId 加载物料信息
 * @param workShopId
 */
function loadWorkShopById(workShopId){
  workShopRequest.selectById(workShopId,res=>{
    if(res.data){
      workShop.value = res.data;
      // 弹窗
      workShopDetailWinDialogVisible.value = true;
    }
  });
}

/**
 * 侦听器 侦听 props.workShopId
 * // 每次属性props.workShopId发生变化这里都会执行
 */
watch(()=>props.workShopId,()=>{
  // 判断 workShopId 是否是-1，如果是-1，说明是取消操作，不需要做任何操作。
  if(props.workShopId != -1){
    // 如果不是-1 就加载要编辑的数据
    loadWorkShopById(props.workShopId);
  }
});

</script>
<style scoped>

</style>